<template>
  <div class="NoticeListAdd-add">
    <div class="InformationDetail-add-top">
      <div class="InformationDetail-add-elrow">
        <el-row>
          <el-button size="small" :disabled="true">预警信息</el-button>
          <el-button size="small" :disabled="true">预警通知单</el-button>
          <el-button size="small" :disabled="true">预警措施</el-button>
          <el-button size="small" type="primary">预警日报</el-button>
        </el-row>
      </div>
      <div class="InformationDetail-add-row">
        <el-row>
          <el-button size="small" @click="AddFh">返回</el-button>
        </el-row>
      </div>
    </div>
    <div class="NoticeListAdd-add-forms">
      <div class="NoticeListAdd-add-title">
        国网湖北电力随州地区暴雨黄色预警通知 〔2021〕第 8 号
      </div>
      <div class="NoticeListAdd-add-form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" label-width="100px" :disabled="disabled">
          <div class="flexBetween">
            <el-form-item label="签发人:">
              <el-input v-model="formInline.qfr" :disabled="true"> </el-input>
            </el-form-item>
            <el-form-item label="时间:">
              <el-input v-model="formInline.sj" :disabled="true"> </el-input>
            </el-form-item>
          </div>
          <el-form-item label="单位/部门:" class="sjgy" label-width="110px">
            <el-select v-model="value2" multiple placeholder="请选择" class="sjgys">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="flexBetween">
            <el-form-item label="预警来源:">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="marginL120">
              <el-button type="text" size="mini">
                湖北省随州市暴雨黄色预警
              </el-button>
            </el-form-item>
          </div>
          <div class="flexBetween">
            <el-form-item label="险情类别:">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="暴雨" value="shanghai"></el-option>
                <el-option label="泥石流" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="预警级别:">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="黄色" value="shanghai"></el-option>
                <el-option label="蓝色" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="影响范围:" class="sjgy" label-width="110px">
            <el-input v-model="formInline.value" type="textarea" class="sjgys" resize="none">
            </el-input>
          </el-form-item>

          <div class="NoticeListAdd-add-btn marginB15">
            <el-button type="primary" size="mini">预计受影响设备</el-button>
            <el-button type="primary" size="mini">影响范围天气</el-button>
          </div>

          <div class="flexBetweens">
            <el-form-item label="影响时间:">
              <el-date-picker type="datetime" placeholder="选择日期" v-model="formInline.date2" style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="至:" label-width="30px">
              <el-date-picker type="datetime" placeholder="选择日期" v-model="formInline.date2" style="width: 100%"></el-date-picker>
            </el-form-item>
          </div>
          <el-form-item label="事件概要:" class="sjgy" label-width="110px">
            <el-input v-model="formInline.sjgy" type="textarea" class="sjgys" resize="none">
            </el-input>
          </el-form-item>
          <div class="flexAround">
            <div class="ontSize14 flexArounds">有关措施要求:</div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="index" label="序号" align="center">
              </el-table-column>
              <el-table-column prop="name" label="有关措施要求" min-width="400" align="center">
              </el-table-column>
              <el-table-column prop="province" label="责任单位/部门" min-width="120" align="center">
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button @click="addRow(tableData)" type="text" size="mini" icon="el-icon-plus" v-if="scope.$index===tableData.length-1"></el-button>
                  <el-button @click="deleteRow(scope.$index, tableData)" type="text" size="mini" icon="el-icon-minus"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-form-item label="联系人:" style="padding-top: 10px" class="sjgy" label-width="110px">
            <el-input v-model="formInline.value" type="textarea" class="sjgys" resize="none">
            </el-input>
          </el-form-item>
          <div class="flexBetween">
            <el-form-item label="抄报:">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="暴雨" value="shanghai"></el-option>
                <el-option label="泥石流" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="抄送:">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="黄色" value="shanghai"></el-option>
                <el-option label="蓝色" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="调整说明:" label-width="110px" class="sjgy">
            <el-input v-model="formInline.tzsm" type="textarea" class="sjgys" resize="none">
            </el-input>
          </el-form-item>
          <div class="InformationListAdd-add-form-add">
            <el-form-item style="margin: 30px 350px">
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button @click="onSubmit">取消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewlyAdded",
  components: {},
  data() {
    return {
      reverse: false,
      disabled: false,
      value1: "",
      options: [{ value: "选项1", label: "互联网部" }, { value: "选项2", label: "互联网部" }],
      value2: [{ label: "设备部" }, { label: "互联网部" }],
      formInline: {
        qfr: "朱望林",
        sj: "2021-09-05 18:00:00",
        date1: "",
        region: "",
        value: "随州市全市",
        tzsm: "",
        date2: "",
        sjgy: "据湖北省重大气象信息专报(〔2021〕第18期)预报，8月11日23时至8月12日24时，湖北随州市有大到暴雨，随县、广水市等局部地区有特大暴雨（150-250毫米），期间短时强降雨、雷电大风等强对流天气多发，最大小时降雨量40-90毫米，短时大风风力可达8-11级。"
      },
      tableData: [
        {
          name: "各单位启动预警响应，通过“预警 12379”APP接收相关市（县）暴雨预警信号，相应专业部门及所属单位开展应急准备工作。在收到预警通知2小时内，预警涉及单位编制完成预警相应行动汇报PPT，报上级迎峰度夏及防汛值班室。",
          province: "安监部"
        },
        {
          name: "加强调度运行管理。地、县两级调度机构要合理安排运行方式，做好各种运行方式情况下的事故预想，防止电网事件。",
          province: "调度中心"
        },
        {
          name: "加强对重要输电通道、重要变电站、35kV及以上属地化线路供电设备巡视和监测。做好设备隐患排查治理。提前清理输电通道及变电站周边可能影响线路安全的树竹、广告标牌、易漂浮物。",
          province: "设备部"
        },
        {
          name: "加强配网设备运维巡视。对开闭所、配电室开展专项特巡，重点加强配电站房通风、照明、消防设施检查，做好设备应急抢修队伍准备，落实各项安全措施。",
          province: "配电部"
        }
      ],
      activities: [

      ]
    };
  },
  mounted: {},
  methods: {
    AddFh() {
      this.$router.go(-1);
    },
    onSubmit() {
      console.log(window.location.href);
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    addRow(tableData) {
      tableData.push({
        name: "", province: ""
      });
    }
  }
};
</script>

<style scoped lang="less">
.NoticeListAdd {
  width: 100%;
  height: 100%;
}

.InformationListAdd-add-form-add {
  display: flex;
  justify-content: center;
  margin-bottom: 2%;
}

.sjgy {
  width: 100%;
  display: flex;
  :deep(.el-form-item__content) {
    width: 100%;
  }
  .sjgys {
    width: 100%;
  }
  :deep(.el-textarea__inner) {
    min-height: 100px !important;
  }
}
:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}
:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}
.NoticeListAdd-center {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.NoticeListAdd-sjx {
  width: 20%;
  height: 98%;
  margin-top: 8px;
  background-color: #fff;
  border-radius: 5px;
}
.NoticeListAdd-add {
  width: 83%;
  background-color: #fff;
  border-radius: 5px;
}
.NoticeListAdd-add-title {
  width: 98%;
  height: 18%;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;
  font-size: 30px;
  background-color: #f4f4f4;
}
.NoticeListAdd-add-forms {
  width: 100%;
  height: 86%;
  overflow-y: auto;
}
.NoticeListAdd-add-form {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  margin-top: 5px;
  .NoticeListAdd-add-btn {
    padding-left: 100px;
  }
  .flexArounds {
    width: 100px;
    font-size: 14px;
  }
}
.NoticeListAdd-sjxs {
  width: 98%;
  height: 5%;
  margin-left: 30px;
  margin-top: 10px;
}
</style>
